<template>
    <div id="buyPrize">
        <div id="content">
            <div class="header">麦穗充值</div>
            <div class="border-ef">
                <div class="clearfix">
                    <div class="pull-left itemName">充值账户 :</div>
                    <div class="gray-box pull-left count">spotman@126.com</div>
                </div>
                <div class="clearfix mt20">
                    <div class="pull-left itemName">充值数量 :</div>
                    <div class="count-box pull-left mr10 ml15"
                         :class="{'select-count':rechargeIndex==0}"
                         @click="chooseRechargeNum(0)">5000</div>
                    <div class="count-box pull-left mr10"
                         :class="{'select-count':rechargeIndex==1}"
                         @click="chooseRechargeNum(1)">10000</div>
                    <div class="count-box pull-left mr10"
                         :class="{'select-count':rechargeIndex==2}"
                         @click="chooseRechargeNum(2)">30000</div>
                    <div class="count-box pull-left"
                         :class="{'select-count':rechargeIndex==3}"
                         @click="chooseRechargeNum(3)">
                        <input type="text" placeholder="其它">
                    </div>
                    <div class="pull-left lh34 pl10">麦穗 (每次充值不低于5000麦穗)</div>
                </div>
                <div class="clearfix mt20">
                    <div class="pull-left itemName">支付方式 :</div>
                    <div class="pull-left pay-way-box"
                         :class="{'select-count': typeIndex==0}"
                         @click="chooseRechargeType(0)">
                        <em class="zhifubao-icon pull-left"></em>
                        <span class="pull-left">支付宝</span>
                    </div>
                    <div class="pull-left pay-way-box"
                         :class="{'select-count': typeIndex==1}"
                         @click="chooseRechargeType(1)">
                        <em class="yinlian-icon pull-left"></em> 
                        <span class="pull-left">银行转账</span>
                    </div>
                </div>
                <div class="clearfix mt10 mb30">
                    <div class="pull-left itemName">应付金额 :</div>
                    <div class="pull-left ml15 lh34">
                        <span class="text-red">500</span>
                        元 ( 1元人民币＝10麦穗 , 如需发票请联系客服 )
                    </div>
                </div>
                <div class="pd50">
                    <button class="btn">立即支付</button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
	import * as api from './../api/api';
    export default {
        data(){
            return {
               rechargeIndex: 0,
               typeIndex: 0
            }
        },
        mounted(){
            
        },
        computed: {

        },
        methods: {
           chooseRechargeNum(index){
                var curIndex = this.rechargeIndex;
                if (curIndex===index) return;
                this.rechargeIndex = index;
           },
           chooseRechargeType(index){
                var curIndex = this.typeIndex;
                if (curIndex===index) return;
                this.typeIndex = index;
           }
        }
        
    }
</script>

<style lang="less" scoped>
    *{
        box-sizing: border-box;
    }
    .pull-left {
        float: left!important;
    }
    .pull-right {
        float: right!important;
    }
    .clearfix:after {
        display: block;
        content: "";
        visibility: hidden;
        height: 0;
        clear: both;
    }
    .gray-box, .count-box, .pay-way-box{
        background-color: #f4f8fb;
        line-height: 34px;
        height: 34px;
        border: 1px solid #efefef;
    }
    .mt20{
        margin-top:20px;
    }
    .mt10{
        margin-top:10px;
    }
    .mb30{
        margin-bottom: 30px;
    }
    .mr10{
        margin-right: 10px;
    }
    .ml15{
        margin-left: 15px;
    }
    .lh34{
        line-height: 34px;
    }
    .pl10{
        padding-left: 10px;
    }
    .pd50{
        padding: 50px;
        .btn{
            width: 150px;
            line-height: 34px;
            border-radius: 3px;
            padding: 0;
            color: #fff;
            font-size: 12px;
            background-color: #ec5463;
            height: 34px;
            display: inline-block;
            margin-bottom: 0;
            font-weight: 400;
            text-align: center;
            vertical-align: middle;
            touch-action: manipulation;
            cursor: pointer;
            border: 1px solid transparent;
            white-space: nowrap;
            outline: 0!important;
            box-shadow: none!important;
        }
    }
    .text-red{
        color: #ec5463;
        font-size: 18px;
    }
    #buyPrize{
        background: #f4f8fb;
        padding: 40px;
        #content{
            position:relative;
            .header{
                color: #333;
                background-color: #fff;
                border: 1px solid #efefef;
                border-bottom: 1px solid #fff;
                width: 140px;
                padding: 15px;
                margin: 0;
                font-size: 14px;
                height: 48px;
                text-align: center;
                border-radius: 4px 4px 0 0;
                cursor: pointer;
                position:relative;
                z-index: 2;
            }
            .border-ef{
                margin-top:-1px;
                border: 1px solid #efefef;
                background-color: #fff;
                color: #888;
                padding: 20px;
                font-size: 12px;
                .itemName{
                    line-height: 34px;
                }
                .count {
                    width: 200px;
                    margin-left: 15px;
                    text-align: center;
                }
                .count-box{
                    width: 100px;
                    overflow: hidden;
                    cursor: pointer;
                    text-align: center;
                    position: relative;
                    input{
                        text-align:center;
                        background-color: #F4F8FB;
                        border:none;
                        width: 100%;
                        height: 34px;
                        padding: 6px 12px;
                        font-size: 12px;
                        line-height: 1.42857;
                        color: #555;
                        display: block;
                        outline: 0!important;
                        box-shadow: none!important;
                    }
                }
                .select-count{
                    border-color: #ec5363;
                    background-color: #fff;
                    position:relative;
                }
                .select-count input{
                    background-color: #ffffff;
                }
                .select-count:after{
                    content:'';
                    position: absolute;
                    right: 0;
                    bottom: 0;
                    width: 24px;
                    height: 19px;
                    display: inline-block;
                    background: url('../assets/img/icon2.png') no-repeat;
                    background-size: 120px 560px;
                    background-position: -80px -90px;
                }
                .pay-way-box{
                    width: 130px;
                    overflow: hidden;
                    cursor: pointer;
                    text-align: center;
                    position: relative;
                    margin-left: 15px;
                    .zhifubao-icon {
                        width: 18px;
                        height: 17px;
                        display: inline-block;
                        background: url('../assets/img/icon2.png') no-repeat;
                        background-position: -80px 0;
                        background-size: 120px 560px;
                        margin-left: 35px;
                        margin-top: 7px;
                        margin-right: 5px;
                    }
                    .yinlian-icon{
                        width: 28px;
                        height: 16px;
                        display: inline-block;
                        background: url('../assets/img/icon2.png') no-repeat;
                        background-size: 120px 560px;
                        background-position: -80px -30px;
                        margin-left: 20px;
                        margin-top: 8px;
                        margin-right: 5px;
                    }
                }
            }
        }
    }

</style>
